import React, { useEffect, useRef, useState } from "react";

export const NoticeShow = (props: {
    text:string
}): JSX.Element => {
    const { text } = props;
    const [left,setLeft]= useState(5001);
    const wordsLen =text.length*10; 
    const textRef = useRef(null);
    useEffect(() => {
        if(left>5000&& textRef.current){
            setLeft(textRef.current.offsetWidth-20)
        }
        const interval = setInterval(() => {
            setLeft(pre=>{
                if(pre < 0-wordsLen){
                    let width =500;
                    if(textRef.current){
                        width = textRef.current.offsetWidth-20;
                    }
                    return width
                }
                return pre -1
            })
        }, 100);
        return () => clearInterval(interval);
      }, [text]);
    return (
        <div ref={textRef} style={{backgroundColor:"#cfd5de",overflow:"hidden"}}>
            <span  style={{whiteSpace:"nowrap", position:"relative",display: "inline-block",left:`${left}px`,width:"100px",color:"red"}}>{text}</span>
        </div>
    );
}